<template>
  <div class="personal">
    <div class="header">
      <div class="head-pic-wrapper">
        <i class="iconfont icon-touxiang"></i>
      </div>
      <div class="button-wrapper">
        <div class="sign-in">注册</div>
        <div class="line"></div>
        <div class="login-in">登录</div>
      </div>
    </div>
    <div class="my-order">
      <div class="order-top border-bottom">
        <div class="order-title"><i class="iconfont icon-i-order"></i>我的订单</div>
        <div class="more-info">查看我的全部订单<i class="iconfont icon-arrow"></i></div>
      </div>
      <div class="order-state border-bottom">
        <div class="state-item">
          <i class="iconfont icon-To_be_paid"></i>
          <div class="to-be-paid">待付款</div>
        </div>
        <div class="state-item">
          <i class="iconfont icon-icon5"></i>
          <div class="to-be-recieved">待收货</div>
        </div>
        <div class="state-item">
          <i class="iconfont icon-daipingjia"></i>
          <div class="to-be-rated">待评价</div>
        </div>
        <div class="state-item">
          <i class="iconfont icon-icon5"></i>
          <div class="refund">退货/退款</div>
        </div>
      </div>
    </div>
    <div class="my-assets">
      <div class="my-assets-top border-bottom">
        <div class="my-assets-title"><i class="iconfont icon-zichan"></i>我的资产</div>
      </div>
      <div class="my-assets-category">
        <div class="item">
          <div class="cash-coupons">现金券</div>
        </div>
        <div class="item">
        <div class="red-envelope">红包</div>
        </div>
        <div class="item">
          <div class="balance">余额</div>
        </div>
        <div class="item">
          <div class="gift-card">礼品卡</div>
        </div>
      </div>
    </div>
    <div class="other-service">
      <div class="service-item after-sale-service border-bottom">
        <i class="iconfont icon-shouhoufuwu"></i>
        <span class="text">售后服务</span>
        <i class="iconfont icon-arrow"></i></div>
      <div class="service-item feedback border-bottom">
        <i class="iconfont icon-yijianfankui"></i>
        <span class="text">意见反馈</span>
        <i class="iconfont icon-arrow"></i>
      </div>
      <div class="service-item shipping-address border-bottom">
        <i class="iconfont icon-shouhuodizhi"></i>
        <span class="text">收货地址</span>
        <i class="iconfont icon-arrow"></i>
      </div>
      <div class="service-item sign-out border-bottom">
        <i class="iconfont icon-tuichudenglu"></i>
        <span class="text">退出登录</span>
        <i class="iconfont icon-arrow"></i>
      </div>
      <div class="service-item call border-bottom">
        <i class="iconfont icon-weibiaoti-"></i>
        <span class="text">400-123-8888</span>
        <i class="iconfont icon-arrow"></i>
      </div>
    </div>
    <footer class="footer">客服热线400-123-8888(8:00-22:00)<br>拨打前请记录您的UID 0</footer>
  </div>
</template>
<script>
import './iconfont/iconfont.css'
export default {
  name: 'personal'
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/mixin'
.border-bottom
  border-color #b2b2b2
.personal
  width 100%
  font-size 20px
  .header
    height 200px
    background-color red
    display flex
    flex-direction column
    border-bottom 15px solid #eee
    align-items center
    justify-content center
    .head-pic-wrapper
      width 70px
      height 70px
      border-radius 50%
      background-color white
      margin-bottom 10px
      flex-center()
      .icon-touxiang
        font-size 60px
    .button-wrapper
      display flex
      justify-content center
      color #fff
      .line
        width 2px
        background-color #bfbfbf
        margin 0 30px
  .my-order
    background #fff
    border-bottom 15px solid #eee
    .order-top
      display flex
      line-height 2
      padding 0 10px
      justify-content space-between
      .order-title
        .iconfont
          padding-right 10px
      .more-info
        .icon-arrow
          padding-left 10px
    .order-state
      display flex
      justify-content space-around
      line-height 2
      .state-item
        display flex
        flex-direction column
        align-items center
        .iconfont
          font-size 40px
  .my-assets
    background #fff
    .my-assets-top
      padding-left 10px
      .my-assets-title
        line-height 2
        .icon-zichan
          padding-right 10px
    .my-assets-category
      display flex
      justify-content space-around
      line-height 2
      border-bottom 15px solid #eee
      .item
        flex 1
        display flex
        flex-direction column
        align-items center
  .other-service
    background #fff
    .service-item
      line-height 2
      padding-left 10px
      position relative
      .icon-arrow
        position absolute
        right 0
        top 0
      .iconfont
        padding-right 10px
  .footer
    line-height 2
    padding-left 10px
    padding-top 30px
</style>
